<template>
  <view class="business">
    <view class="containerSet" @click="setIspop()">
      <view class="float-buttonSet">
        <view style="margin-top: 88rpx">
          <image
            style="width: 50rpx; height: 50rpx"
            src="../../../static/images/set.png"
            mode=""
          ></image>
        </view>
      </view>
    </view>
    <view
      class=""
      style="
        margin-top: 800rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 700;
        font-size: 40rpx;
      "
      v-if="list.length == 0"
    >
      请联系业务人员开通账号权限使用!
    </view>
    <view class="business-header">
      <view
        class="headerbox"
        @click="changeTips"
        v-if="service"
        style="margin-top: 100rpx"
      >
        <image :src="service.merchant.mer_avatar" mode=""></image>
        <span class="font line1">{{
          service.merchant.mer_name || "暂无店铺"
        }}</span>
        <text v-if="!downStatus" class="iconfont icon-xiala1 spin"></text>
        <text v-else class="iconfont icon-xiala1"></text>
      </view>
    </view>
    <view class="business-content" style="margin-top: 200rpx">
      <view @click="goNext(item)" class="listBox" v-for="(item, index) in list">
        <text
          v-if="item.img == undefined"
          :class="item.icon"
          class="businessIcon"
        ></text>
        <image v-if="item.icon == undefined" :src="item.img"></image>
        <view>{{ item.title }}</view>
      </view>
    </view>
    <view class="hrefBox">
      <!-- href="https://mer.syn.tswm.club/pages/users/user_about/index?from=sys_user_agree" -->
      <!-- <text
        >点击查看<span
          @click="fuwu()"
          style="text-decoration: underline; color: #277cfc"
          >《服务条款》</span
        >和<span
          @click="yinsi()"
          style="text-decoration: underline; color: #277cfc"
          >《隐私政策》</span
        ></text
      > -->

      <!-- href="https://mer.syn.tswm.club/pages/users/user_about/index?from=sys_userr_privacy"/ -->
    </view>
    <shopList
      ref="shopList"
      @changeStoreClose="changeClose"
      @getService="getService"
      :is_sys="is_sys"
    ></shopList>
    <view class="container" @click="myIspop()">
      <view class="float-button">
        <view style="margin-top: 10rpx">我的</view>
        <view>店铺</view>
      </view>
    </view>
    <u-popup v-model="reasonDialog" mode="center" border-radius="14">
      <view class="cha" @click="outis()">×</view>
      <view
        style="padding: 20rpx; width: 200px; height: 200px; margin-top: 20rpx"
      >
        <image
          @longtap.stop="deleteItem()"
          style="width: 100%; height: 120%"
          :src="imagesImg"
          mode=""
        ></image>
      </view>

      <view
        style="background: #ffffff; position: absolute; bottom: 0; left: 23%"
        @click="deleteItem"
        >点击保存图片</view
      >
    </u-popup>
  </view>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import shopList from "@/components/shopList";
import { getLogout, productQrcodeMy } from "@/api/user.js";
export default {
  name: "business",
  components: {
    shopList,
  },
  data() {
    return {
      is_sys: 0,
      downStatus: false,
      service: null,
      loginType: "h5",

      imagesImg: "",
      reasonDialog: false,
    };
  },
  computed: {
    list() {
      if (!this.service) return [];
      const merId = this.service.mer_id;
      const list = [
        {
          type: "customer",
          title: "客服记录",
          url: "/pages/chat/customer_list/index?type=1&mer_id=" + merId,
          icon: "iconfont icon-kefujilu",
        },
      ];
      if (this.service.is_verify) {
        list.push({
          title: "订单核销",
          url: "/pages/admin/order_cancellation/index?mer_id=" + merId,
          icon: "iconfont icon-dingdanhexiao",
        });
      }
      if (this.service.customer) {
        list.push({
          title: "订单管理",
          url: "/pages/admin/order/index?mer_id=" + merId,
          icon: "iconfont icon-dingdanguanli",
        });
      }
      if (this.service.is_goods) {
        list.push({
          title: "商品管理",
          url: "/pages/product/list/index?mer_id=" + merId,
          icon: "iconfont icon-shangjiaguanli",
        });
      }
      if (this.service.is_wallet) {
        list.push({
          title: "我的钱包",
          url: "/pages/product/wallet/wallet?mer_id=" + merId,
          img: "../../../static/images/money.png",
        });
      }
      if (this.service.is_msg) {
      list.push({
        title: "平台消息",
        url: "/pages/product/msg/msg?mer_id=" + merId,
        img: "../../../static/images/xiaoxi.png",
      });
    }
      // list.push({
      //   title: "退出登录",
      //   url: "/pages/product/list/index?mer_id=" + merId,
      //   img: "../../../static/images/out.png",
      // });
      // list.push({
      //   title: "注销账号",
      //   url: "/pages/users/user_about/index?from=" + "the_cancellation_msg",
      //   img: "../../../static/images/get.png",
      // });
      return list;
    },
  },
  onLoad: function (options) {
    let token = uni.getStorageSync("LOGIN_STATUS_TOKEN");
    if (!token) {
      uni.redirectTo({
        url: "/pages/users/login/index",
      });
      return;
    }
    // this.is_sys = options.is_sys;
    this.is_sys = 0;
    this.getStoreList({
      is_sys: this.is_sys,
    });
    uni.setNavigationBarTitle({
      title: this.is_sys ? "平台管理" : "商家管理",
    });
  },
  methods: {
    baocun() {
      let that = this;
      //获取授权列表，查看是否授权写入相册权限
      uni.getSetting({
        success(res) {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success() {
                that.saveimgtoAlbum(that.imagesImg);
              },
            });
          } else {
            that.saveimgtoAlbum(that.imagesImg);
          }
        },
      });
    },
    saveimgtoAlbum(imgurl) {
      //图片保存到本地
      let that = this;
      uni.showLoading();
      uni.saveImageToPhotosAlbum({
        filePath: imgurl,
        success: function (data) {
          uni.hideLoading();
          uni.showToast({
            title: "保存成功",
            icon: "success",
            duration: 2000,
          });
        },
        fail: function (err) {
          uni.hideLoading();
          if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            uni.openSetting({
              success(settingdata) {
                if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                  uni.showToast({
                    title: "您已授权成功，请重新保存海报",
                    icon: "success",
                    duration: 2000,
                  });
                } else {
                  uni.showToast({
                    title: "尚未授权，无法保存海报",
                    icon: "none",
                    duration: 2000,
                  });
                }
              },
            });
          }
        },
        complete(res) {
          console.log(res);
        },
      });
    },
    deleteItem() {
      // let that = this;
      // const imagePath = that.imagesImg;
      // uni.getImageInfo({
      //   src: imagePath,
      //   success: function (image) {
      //     console.log(image);
      //     uni.saveImageToPhotosAlbum({
      //       filePath: image.path,
      //       success: function (res) {
      //         console.log(res);
      //         that.$util.Tips({
      //           title: "保存成功",
      //           icon: "success",
      //         });
      //       },
      //       fail: function (res) {
      //         console.log(res);
      //         that.$util.Tips({
      //           title: "保存失败",
      //         });
      //       },
      //     });
      //   },
      // });

      // that.reasonDialog = false;
      var _this = this;
      wx.getSetting({
        success(res) {
          if (res.authSetting["scope.writePhotosAlbum"]) {
            // 已获得存储相册授权
            _this.downloadImage();
          } else {
            // 未获得存储相册授权
            wx.showModal({
              title: "提示",
              content: "需要您授权保存相册",
              showCancel: false,
              success: () => {
                wx.openSetting({
                  success(settingdata) {
                    //再进行图片上传操作
                    _this.downloadImage();
                  },
                });
              },
            });
          }
        },
      });
    },
    downloadImage() {
      var that = this;
      let imgList = that.imagesImg;
      that.downloadUp(imgList);
      uni.showModal({
        title: "提示",
        content: "图片已保存到手机相册",
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            // 用户点击了确定按钮的相关逻辑可以放在这里
          } else if (res.cancel) {
            console.log("用户点击取消");
            // 用户点击了取消按钮的相关逻辑可以放在这里
          }
        },
      });
    },
    downloadUp(imgList) {
      var that = this;
      wx.downloadFile({
        url: imgList,
        success: function (res) {
          let temp = res.tempFilePath;
          wx.saveImageToPhotosAlbum({
            filePath: temp,
            success(res) {
              wx.hideLoading();
            },
            fail(err) {
              wx.hideLoading();
              console.log("下载失败");
            },
          });
        },
        fail(err) {
          that.loading = false;
          console.log("下载失败");
        },
      });
    },
    yinsi() {
      uni.navigateTo({
        url: "/pages/users/user_about/index?from=sys_userr_privacy",
      });
    },
    fuwu() {
      uni.navigateTo({
        url: "/pages/users/user_about/index?from=sys_user_agree",
      });
    },
    setIspop() {
      uni.navigateTo({
        url: "/pages/admin/my/index",
      });
    },
    outis() {
      this.reasonDialog = false;
    },
    myIspop() {
      let that = this;
      if (that.reasonDialog == false) {
        console.log(that.service.mer_id);
        let merId = that.service.mer_id;
        productQrcodeMy(merId).then(async (res) => {
          console.log(res.data.url);
          const base64Image = res.data.url; // 这里应该是你的base64字符串
          that.imagesImg = base64Image.replace(/[\r\n]/g, "");
          that.reasonDialog = true;
        });
      } else {
        that.reasonDialog = false;
      }
    },
    outLogin: function () {
      let that = this;
      if (that.loginType == "h5") {
        uni.showModal({
          title: "提示",
          content: "确认退出登录?",
          success: function (res) {
            if (res.confirm) {
              getLogout()
                .then((res) => {
                  that.$store.commit("LOGOUT");
                  uni.redirectTo({
                    url: "/pages/users/login/index",
                  });
                })
                .catch((err) => {
                  console.log(err);
                });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },
    changeCancel() {
      uni.navigateTo({
        url: "/pages/users/user_about/index?from=" + "the_cancellation_msg",
      });
    },
    getStoreList: function (data) {
      this.$nextTick(() => {
        this.$refs.shopList.getStoreList(data);
      });
    },
    changeTips(data) {
      this.downStatus = !this.downStatus;
      this.$refs.shopList.isShowStore();
    },
    changeClose() {
      this.downStatus = false;
    },
    goNext(item) {
      if (item.title == "退出登录") {
        this.outLogin();
        return;
      }
      if (item.type == "customer" && this.service.status == 0) {
        return this.$util.Tips({
          title: "客服已离线，请开启客服状态！",
        });
      } else {
        uni.navigateTo({
          url: item.url,
        });
      }
    },
    getService: function (data) {
      this.service = data;
      if (data && data.merchant) {
        uni.setNavigationBarTitle({
          title: data.merchant.mer_name,
        });
      } else {
        uni.setNavigationBarTitle({
          title: !data.mer_id ? "平台管理" : "商家管理",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.hrefBox {
  position: fixed;
  bottom: 20rpx;
  left: 20%;
}
.business {
  margin-top: 250rpx;
}
.businessIcon {
  color: #ff6b00;
  font-size: 80rpx;
  display: inline-block;
  margin-bottom: 29rpx;
}

.business-header {
  height: 505rpx;
  background: linear-gradient(180deg, #ff6b00 0%, rgba(34, 145, 248, 0) 100%);
  position: fixed;
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;

  .headerbox {
    max-width: 360rpx;
    margin: 0 auto;
    position: relative;
    padding: 10rpx 0rpx 10rpx 0rpx;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 30rpx;
    color: #ffffff;
    margin-top: 33rpx;

    .font {
      max-width: 260rpx;
      display: inline-block;
      margin-left: 10rpx;
      line-height: 28rpx;
    }

    image {
      width: 34rpx;
      height: 34rpx;
      position: relative;
      top: 4rpx;
    }

    .spin {
      display: inline-block;
      transform: rotate(180deg);
      font-size: 36rpx;
    }
  }
}

.business-content {
  width: 100%;
  padding: 0 18rpx;
  margin-top: 151rpx;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 150rpx;

  .listBox {
    width: 300rpx;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0rpx 5rpx 15rpx rgba(142, 82, 77, 0.1);
    border-radius: 20rpx;
    z-index: 1;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 96rpx;
      height: 96rpx;
      top: -18rpx;
    }
  }
}

/deep/ radio .wx-radio-input.wx-radio-input-checked,
/deep/radio .uni-radio-input.uni-radio-input-checked {
  border: 1px solid #ff6b00 !important;
  background-color: #ff6b00 !important;
}
.containerSet {
  position: relative;
  height: 100%;
}
.container {
  position: relative;
  height: 100%;
}
.float-buttonSet {
  text-align: center;
  border-radius: 50%;
  position: fixed;
  right: 40rpx;
  top: 80rpx;
  width: 100rpx;
  height: 100rpx;
  z-index: 999999;
}
.float-button {
  text-align: center;
  border-radius: 50%;
  background: #ff6b00;
  color: #fff;
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 50px;
  height: 50px;
  z-index: 999999;
}

.float-button image {
  width: 100%;
  height: 100%;
}
.cha {
  font-size: 50rpx;
  position: absolute;
  right: 4rpx;
  top: -16rpx;
}
</style>